<ion-header>
  <ion-navbar>
    <ion-title class="bp-title">{{'Add funds' | translate}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content [ngClass]="{'add-padding-bottom': isCordova}" no-bounce>
  <ion-item>
    <div class="bitpay-title">
      <ng-container *ngIf="brand === 'Mastercard' else visa">
        <img src="assets/img/bitpay-card/bitpay-card-mc.svg">
        <span>BitPay Card</span>
        <ion-note>
          <span translate>Virtual</span>
        </ion-note>
        <ion-note>
          <span translate>Physical</span>
        </ion-note>
      </ng-container>
      <ng-template #visa>
        <img src="assets/img/bitpay-card/bitpay-card-visa.svg">
        <span>BitPay Visa&reg; Card ({{lastFourDigits}})</span>
      </ng-template>

    </div>
    <div class="amount-label">
      <div class="amount">{{amountUnitStr}}</div>
      <div class="alternative" *ngIf="wallet">
        <span *ngIf="rate && !isERCToken">
          @ {{rate | number:'1.2-2'}} {{currencyIsoCode}} per {{wallet.coin.toUpperCase()}}
        </span>
        <span *ngIf="!rate && !isERCToken">...</span>
      </div>
    </div>
  </ion-item>

  <div class="line-divider"></div>

  <ion-list class="bp-list">

    <ion-item class="sub-title">
      <ion-label>
        <div class="main-label" translate>SUMMARY</div>
      </ion-label>
    </ion-item>

    <button ion-item detail-none (click)="showWallets()">
      <ion-label>
        <div class="summary-item">
          <span translate>Sending from</span>
        </div>
      </ion-label>
      <ion-note item-end>
        <ion-row align-items-center class="wallet" *ngIf="wallet">
          <ion-col>
            <coin-icon [coin]="wallet.coin" [network]="wallet.network"></coin-icon>
          </ion-col>

          <ion-col>
            <span class="note-container ellipsis">{{wallet.name}}</span>
          </ion-col>
        </ion-row>

        <ion-row align-items-center class="wallet" *ngIf="coinbaseAccount">
          <ion-col>
            <ion-icon item-start>
              <img src="assets/img/coinbase/coinbase-icon.png" width="32">
            </ion-icon>
          </ion-col>

          <ion-col>
            <span class="note-container ellipsis">{{coinbaseAccount.name}}</span>
          </ion-col>
        </ion-row>

        <ion-row align-items-center class="wallet" *ngIf="!wallet && !coinbaseAccount">
          <div translate>Select a wallet</div>
          <div class="last-item" item-end>
            <button ion-button clear color="grey" icon-only>
              <ion-icon *ngIf="!isOpenSelector" name="ios-arrow-down-outline"></ion-icon>
              <ion-icon *ngIf="isOpenSelector" name="ios-arrow-up-outline"></ion-icon>
            </button>
          </div>
        </ion-row>
      </ion-note>
    </button>

    <div class="line-divider"></div>

    <ion-item>
      <ion-label>
        <div class="summary-item">
          <span translate>Expires</span>
        </div>
      </ion-label>
      <ion-note *ngIf="!paymentExpired" item-end><span [innerHTML]="remainingTimeStr"></span></ion-note>
      <ion-note *ngIf="paymentExpired" [ngStyle]="{'color': 'red'}" item-end>{{'Expired' | translate}}</ion-note>
    </ion-item>

    <div class="line-divider"></div>

    <ion-item>
      <ion-label>
        <div class="summary-item">
          <span translate>Funds to be added</span>
        </div>
      </ion-label>
      <ion-note item-end>
        <span *ngIf="amount">{{amount | number:'1.2-2'}} {{currencyIsoCode}}</span>
        <span *ngIf="!amount">...</span>
      </ion-note>
    </ion-item>

    <div *ngIf="invoiceFee && !coinbaseAccount" class="line-divider"></div>

    <ion-item *ngIf="invoiceFee && !coinbaseAccount">
      <ion-label>
        <div class="summary-item">
          <span translate>Network cost</span>
          <ion-icon class="item-img info" (click)="openExternalLink('networkCost')">
            <img src="assets/img/settings-icons/icon-help-support.svg" width="22">
          </ion-icon>
        </div>
      </ion-label>
      <ion-note item-end>
        <span>{{invoiceFee | number:'1.2-2'}} {{currencyIsoCode}}</span>
      </ion-note>
    </ion-item>

    <div class="line-divider" *ngIf="!coinbaseAccount"></div>

    <ion-item *ngIf="networkFee && !coinbaseAccount">
      <ion-label>
        <div class="summary-item">
          <span translate>Miner fee</span>
          <ion-icon class="item-img info" (click)="openExternalLink('minerFee')">
            <img src="assets/img/settings-icons/icon-help-support.svg" width="22">
          </ion-icon>
        </div>
      </ion-label>
      <ion-note item-end>
        <span>{{networkFee | number:'1.2-2'}} {{currencyIsoCode}}</span>
      </ion-note>
    </ion-item>

    <div class="summary-line"></div>

    <ion-item *ngIf="totalAmountStr">
      <ion-label>
        <div class="main-label total-label">TOTAL</div>
      </ion-label>
      <ion-note item-end>
        <div class="total-amount">
          <span *ngIf="totalAmountStr && !isERCToken">{{totalAmountStr}}</span>
          <span *ngIf="totalAmount && isERCToken">{{totalAmount | number:'1.2-2'}} {{currencyIsoCode}} </span>
        </div>
      </ion-note>
    </ion-item>
    <div *ngIf="totalAmountStr && totalAmount && !isERCToken" class="amount-details">
      <div class="secondary-note">
        {{totalAmount | number:'1.2-2'}} {{currencyIsoCode}}
      </div>
    </div>
  </ion-list>
  <div *ngIf="brand === 'Mastercard'" class="card-terms">
    BY USING THIS CARD YOU AGREE WITH THE TERMS AND CONDITIONS OF THE CARDHOLDER AGREEMENT AND FEE SCHEDULE, IF ANY. This card is issued by Metropolitan Commercial Bank (Member FDIC) pursuant to a license from Mastercard International. "Metropolitan Commercial Bank" and "Metropolitan" are registered trademarks of Metropolitan Commercial Bank ©2014.<br><br>
    Mastercard is a registered trademark and the circles design is a trademark of Mastercard International Incorporated.
  </div>

</ion-content>

<ion-footer>
  <page-slide-to-accept #slideButton *ngIf="isCordova" [disabled]="!((wallet || coinbaseAccount) && totalAmountStr) || paymentExpired" buttonText="{{'Slide to confirm' | translate}}" [isDogecoin]="wallet && wallet.coin == 'doge'" (slideDone)="topUpConfirm()"></page-slide-to-accept>
  <ion-toolbar *ngIf="!isCordova">
    <button ion-button full class="button-footer" (click)="topUpConfirm()" [disabled]="!((wallet || coinbaseAccount) && totalAmountStr) || paymentExpired">
      {{'Add funds' | translate}}
    </button>
  </ion-toolbar>
</ion-footer>